﻿$(function () {

    var people = 0;
    var page = 1;
    GetTrips();

    function GetTrips() {

        var serviceUrl = "http://" + document.location.host + "/ServiceTravelAgency.svc/GetTrips/" + page;

        $.getJSON(serviceUrl, function (data) {
            if (data.length == 0) {
                page--;
                document.getElementById('page').value = page;
                $("#error").removeClass("hiden");
                return;
            }
            var content = $(".trips");
            var html = "";
            for (var trip in data) {
                if (trip % 3 == 0) {
                    html += "<div class='row'>"
                }

                html += "<div class='cell' id='" + data[trip].Id + "'><img  class='small' src='data:image/png;base64," + data[trip].Image + "' />" +
                " <h2>" + data[trip].Title + "</h2></div><div class='clearer'></div>";

                if ((trip % 3) == 2) {
                    html += "</div>"
                }
                if (trip == data.length - 1) {

                    html += "<div class='clearer'></div>";
                }

            }
            content.html("");
            content.html(html);
        });
    }

    $('#previousPage').click(previousPage);
    function previousPage() {
        page--;
        if (page < 1) {
            page = 1;
        }
        document.getElementById('page').value = page;
        GetTrips();
    }

    $('#nextPage').click(getNextPage);
    function getNextPage() {
        page++;
        document.getElementById('page').value = page;
        GetTrips();
    }

    $('#up').click(increasePeople);
    function increasePeople() {
        people++;
        if (people > 99) {
            people = 99;
        }
        document.getElementById('people').value = people;
    }

    $('#down').click(decresePeople);
    function decresePeople() {
        people--;
        if (people < 0) {
            people = 0;
        }
        document.getElementById('people').value = people;
    }

    $('#cancel').click(nextPage);
    function nextPage() {
        $("#details").addClass("hiden");
        $(".content").removeClass("hiden");
    }

    $('#submit').live("click",
      function Vote() {
          var tripId = document.getElementById('tripId').value;
          var people = document.getElementById('people').value;
          var user = document.getElementById('user').value;
          var serviceUrl = "http://" + document.location.host + "/ServiceTravelAgency.svc/CreateReservation";
          var WebReservation = new Object();
          WebReservation.TripId = tripId;
          WebReservation.UserName = user;
          WebReservation.PeopleCount = people;
          var WebReservationJson = JSON.stringify(WebReservation);
          $.ajax({
              type: 'POST',
              async: true,
              url: serviceUrl,
              data: WebReservationJson,
              datatype: 'JSON',
              contentType: "application/json; charset=utf-8",
              success: function (response) {
                  alert("sucess");
              },
              error: function (e) {
                  alert("invalid input");
              }
          });

      });

    $('.cell').live("click",
      function GetDetails() {
          var id = $(this).attr("id");
          var question = $(this).parent().attr("id");
          var serviceUrl = "http://" + document.location.host + "/ServiceTravelAgency.svc/GetTripDetails/" + id;
          $.getJSON(serviceUrl, function (data) {
              $(".content").addClass("hiden");
              $("#details").removeClass("hiden");
              var left = $(".left");
              var html = "";
              html += "<input id='tripId' value='" + id + "' class='hiden'></input>";
              html += "<img class='image' src='data:image/png;base64," + data.Image + "' />";
              html += "<h2>" + data.Title + "</h2>";


              var startDate = new Date(parseInt(data.StartDate.substr(6)));
              var startDateString = '[' + startDate.getDate() + '/' + startDate.getMonth() + '/' + startDate.getFullYear() + '] - ';

              var endDate = new Date(parseInt(data.StartDate.substr(6)));
              var endDateString = '[' + endDate.getDate() + '/' + endDate.getMonth() + '/' + endDate.getFullYear() + ']';
              html += "<p clas='date'>" + startDateString + endDateString + "</p>";
              html += "<p clas='date'>Available rooms: " + data.AvailableRooms + "</p>";
              html += "<p clas='date'>" + data.Discription + "</p>";
              left.html(html);
          });
      });
});